<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 99vw;height:99vh;border:1px solid red"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  <script>
    let mCharts = echarts.init(document.getElementById('echarts'))
    // PM2.5 各城市数据
    var airData = [
      { name: '北京', value: 39.92 },
      { name: '天津', value: 39.13 },
      { name: '上海', value: 31.22 },
      { name: '重庆', value: 66 },
      { name: '河北', value: 147 },
      { name: '河南', value: 113 },
      { name: '云南', value: 25.04 },
      { name: '辽宁', value: 50 },
      { name: '黑龙江', value: 114 },
      { name: '湖南', value: 175 },
      { name: '安徽', value: 117 },
      { name: '山东', value: 92 },
      { name: '新疆', value: 84 },
      { name: '江苏', value: 67 },
      { name: '浙江', value: 84 },
      { name: '江西', value: 96 },
      { name: '湖北', value: 273 },
      { name: '广西', value: 59 },
      { name: '甘肃', value: 99 },
      { name: '山西', value: 39 },
      { name: '内蒙古', value: 58 },
      { name: '陕西', value: 61 },
      { name: '吉林', value: 51 },
      { name: '福建', value: 29 },
      { name: '贵州', value: 71 },
      { name: '广东', value: 38 },
      { name: '青海', value: 57 },
      { name: '西藏', value: 24 },
      { name: '四川', value: 58 },
      { name: '宁夏', value: 52 },
      { name: '海南', value: 54 },
      { name: '台湾', value: 88 },
      { name: '香港', value: 66 },
      { name: '澳门', value: 77 },
      { name: '南海诸岛', value: 55 }
    ]
    // 涟漪坐标数据
    let scatterData = [
      {
        value: [104.065735, 30.659462],
      },
      {
        value: [114.298572, 30.584355],
      }
    ]
    async function getData() {
      // 中国地图数据
      const { data: china } = await axios.get('./map/china.json')
      console.log(china)

      if (china) {
        echarts.registerMap('chinaMap', china)
        let option = {
          title: {
            text: 'PM2.5 指标地图'
          },
          geo: {
            type: 'map',
            map: 'chinaMap',
            roam: true,//允许拖动及缩放
            label: {
              // 显示默认标签名称
              show: true
            },
            zoom: 1.2,//默认缩放比例
            // center: [118.317325, 29.709239]
          },
          series: [
            {
              data: airData,
              geoIndex: 0, //将控制质量数据和第0个geo配置关联在一起
              type: 'map'
            },
            {
              data: scatterData,//配置涟漪动画 坐标数据
              type: 'effectScatter',//指定类型为 涟漪散点图
              coordinateSystem: 'geo',//指明 散点图的坐标系统为 geo的坐标系统
              rippleEffect: {
                // 设置涟漪动画的缩放比例
                scale: 10
              },
            }
          ],
          visualMap: {
            min: 0,
            max: 300,
            // 控制渐变的颜色范围
            inRange: {
              color: ['white', 'teal']
            },
            // 小三角
            calculable: true
          }
        }
        mCharts.setOption(option)
      }
    }
    getData()


  </script>
</body>

</html>